<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>QCloud VIDEO UGC UPLOAD SDK</title>
    <link
      href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style type="text/css">
      .text-danger {
        color: red;
      }

      .control-label {
        text-align: left !important;
      }

      #resultBox {
        width: 100%;
        height: 300px;
        border: 1px solid #888;
        padding: 5px;
        overflow: auto;
        margin-bottom: 20px;
      }

      .uploaderMsgBox {
        width: 100%;
        border-bottom: 1px solid #888;
      }

      .cancel-upload {
        text-decoration: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="container">
        <h1>UGC-Uploader</h1>
      </div>
    </div>
    <div class="container" id="main-area">
      <div class="row" style="padding: 10px">
        <p>示例1点击“直接上传视频”按钮即可上传视频。<br />。</p>
      </div>
      <form ref="vExample">
        <input
          type="file"
          style="display: none"
          ref="vExampleFile"
          @change="vExampleUpload"
        />
      </form>
      <div class="row" style="padding: 10px">
        <h4>示例1：直接上传视频</h4>
        <a
          href="javascript:void(0);"
          class="btn btn-default"
          @click="vExampleAdd"
          >直接上传视频</a
        >
      </div>
      <!-- 上传信息组件	 -->
      <div class="uploaderMsgBox" v-for="uploaderInfo in uploaderInfos">
        <div v-if="uploaderInfo.videoInfo">
          视频名称：{{uploaderInfo.videoInfo.name + '.' +
          uploaderInfo.videoInfo.type}}；
          上传进度：{{Math.floor(uploaderInfo.progress * 100) + '%'}}；
          fileId：{{uploaderInfo.fileId}}；
          上传结果：{{uploaderInfo.isVideoUploadCancel ? '已取消' :
          uploaderInfo.isVideoUploadSuccess ? '上传成功' : '上传中'}}；
          <br />
          地址：{{uploaderInfo.videoUrl}}；
          <a
            href="javascript:void(0);"
            class="cancel-upload"
            v-if="!uploaderInfo.isVideoUploadSuccess && !uploaderInfo.isVideoUploadCancel"
            @click="uploaderInfo.cancel()"
            >取消上传</a
          ><br />
        </div>
        <div v-if="uploaderInfo.coverInfo">
          封面名称：{{uploaderInfo.coverInfo.name}}；
          上传进度：{{Math.floor(uploaderInfo.coverProgress * 100) + '%'}}；
          上传结果：{{uploaderInfo.isCoverUploadSuccess ? '上传成功' :
          '上传中'}}；
          <br />
          地址：{{uploaderInfo.coverUrl}}；
          <br />
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    <script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>

    <script type="text/javascript">
      (function () {
        /**
         * 计算签名。调用签名接口获取
         **/
        function getSignature() {
          return axios
            .get("http://localhost:8301/admin/vod/sign")
            .then((response) => {
              return response.data.data;
            });
        }
        var app = new Vue({
          el: "#main-area",
          data: {
            uploaderInfos: [],

            vcExampleVideoName: "",
            vcExampleCoverName: "",

            cExampleFileId: "",
          },
          created: function () {
            this.tcVod = new TcVod.default({
              getSignature: getSignature,
            });
          },
          methods: {
            /**
             * vExample示例。添加视频
             **/
            vExampleAdd: function () {
              this.$refs.vExampleFile.click();
            },
            /**
             * vExample示例。上传视频过程。
             **/
            vExampleUpload: function () {
              var self = this;
              var mediaFile = this.$refs.vExampleFile.files[0];

              var uploader = this.tcVod.upload({
                mediaFile: mediaFile,
              });
              uploader.on("media_progress", function (info) {
                uploaderInfo.progress = info.percent;
              });
              uploader.on("media_upload", function (info) {
                uploaderInfo.isVideoUploadSuccess = true;
              });

              console.log(uploader, "uploader");

              var uploaderInfo = {
                videoInfo: uploader.videoInfo,
                isVideoUploadSuccess: false,
                isVideoUploadCancel: false,
                progress: 0,
                fileId: "",
                videoUrl: "",
                cancel: function () {
                  uploaderInfo.isVideoUploadCancel = true;
                  uploader.cancel();
                },
              };

              this.uploaderInfos.push(uploaderInfo);
              uploader
                .done()
                .then(function (doneResult) {
                  console.log("doneResult", doneResult);
                  uploaderInfo.fileId = doneResult.fileId;
                  return doneResult.video.url;
                })
                .then(function (videoUrl) {
                  uploaderInfo.videoUrl = videoUrl;
                  self.$refs.vExample.reset();
                });
            },
            // cExample 上传过程
            cExampleUpload: function () {
              var self = this;
              var coverFile = this.$refs.cExampleCover.files[0];

              var uploader = this.tcVod.upload({
                fileId: this.cExampleFileId,
                coverFile: coverFile,
              });
              uploader.on("cover_progress", function (info) {
                uploaderInfo.coverProgress = info.percent;
              });
              uploader.on("cover_upload", function (info) {
                uploaderInfo.isCoverUploadSuccess = true;
              });
              console.log(uploader, "uploader");

              var uploaderInfo = {
                coverInfo: uploader.coverInfo,
                isCoverUploadSuccess: false,
                coverProgress: 0,
                coverUrl: "",
                cancel: function () {
                  uploader.cancel();
                },
              };

              this.uploaderInfos.push(uploaderInfo);

              uploader.done().then(function (doneResult) {
                console.log("doneResult", doneResult);
                uploaderInfo.coverUrl = doneResult.cover.url;
                self.$refs.cExample.reset();
              });
            },
          },
        });
      })();
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-26476625-7"
    ></script>
    <script>
      // add by alsotang@gmail.com
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "UA-26476625-7");
    </script>
  </body>
</html>
